<!DOCTYPE html>
<html layout:decorate="~{layout/master}" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
    <style>
        .tree-banner {
            height: 500px;
            overflow: auto;
        }
    </style>

</head>

<body>
<Row layout:fragment="content" :gutter="24" style="width:100%">
    <i-col span="12">
        <i-button type="primary" @click="addTopMenu">新增一级菜单</i-button>
        <i-button type="primary" @click="addChildMenu">新增子级菜单
        </i-button>
        <i-button type="primary" @click="addPower">新增权限</i-button>
        <div class="tree-banner">
            <Tree ref="myTree" :data="treeData" :render="treeRender"></Tree>
        </div>

    </i-col>
    <i-col span="12">
        <i-form ref="myForm" :model="form" :rules="ruleValidate" label-position="top" v-if="showForm">
            <Form-item label="键" v-if="nodeType=='menu'">
                <i-input v-model="form.menuKey"></i-input>
            </Form-item>
            <Form-item label="键" v-if="nodeType=='power'">
                <i-input v-model="form.powerKey"></i-input>
            </Form-item>
            <Form-item label="父级键" v-if="nodeType=='menu'">
                <i-input v-model="form.parentKey"></i-input>
            </Form-item>
            <Form-item label="关联菜单键名" v-if="nodeType=='power'">
                <i-input v-model="form.menuKey"></i-input>
            </Form-item>
            <Form-item label="名称" prop="name">
                <i-input v-model="form.name"></i-input>
            </Form-item>
            <Form-item label="路由地址" v-if="nodeType=='power'">
                <i-input v-model="form.url"></i-input>
            </Form-item>
            <!--<Form-item label="页面地址" v-if="nodeType=='menu'">-->
            <!--<i-input v-model="form.uri"></i-input>-->
            <!--</Form-item>-->
            <Row>
                <i-col span="12">
                    <Form-item label="图标" v-if="nodeType=='menu'">
                        <i-input v-model="form.icon"></i-input>
                    </Form-item>
                </i-col>
                <i-col span="12">
                    <Form-item label="颜色" v-if="nodeType=='menu'">
                        <!--<ColorPicker v-model="form.colorCode" recommend alpha/>-->
                        <input type="color" v-model="form.colorCode">
                    </Form-item>
                </i-col>
            </Row>
            <Form-item label="排序" v-if="nodeType=='menu'">
                <i-input v-model="form.orderIndex"></i-input>
            </Form-item>
            <Form-item label="启用/禁用" v-if="nodeType=='menu'">
                <i-switch v-model="form.enable" :true-value="1" :false-value="0" size="large">
                    <span slot="open">启用</span>
                    <span slot="close">禁用</span>
                </i-switch>
            </Form-item>
            <Form-item label="扩展功能" v-if="nodeType=='menu' && !form.id">
                <Checkbox v-model="autoCreateOpen">自动创建浏览权限</Checkbox>
            </Form-item>
            <Form-item>
                <i-button type="primary" @click="save">保存</i-button>
                <i-button type="error" style="margin-left: 8px" @click="remove">删除</i-button>
            </Form-item>
        </i-form>
    </i-col>
</Row>

<script layout:fragment="script">
    const m_apis = {
        getTreeForAdmin() {
            return PB.apiRoute('/api/sys/menu/getTreeForAdmin', 'GET');
        },
        save(p_body, p_autoCreateOpen) {
            return PB.apiRoute('/api/sys/menu/save?autoCreateOpen=' + p_autoCreateOpen, 'POST', p_body);
        },
        saveMenuPower(p_body) {
            return PB.apiRoute('/api/sys/menu_power/save', 'POST', p_body);
        },
        remove(p_id) {
            return PB.apiRoute('/api/sys/menu/remove?id=' + p_id, 'POST');
        },
        removeMenuPower(p_id) {
            return PB.apiRoute('/api/sys/menu_power/remove?id=' + p_id, 'POST');
        }
    };

    let vm = new Vue({
        el: '#app',
        data() {
            return {
                apis: m_apis,
                treeData: [],
                selNode: null,
                dbData: [],
                actionType: '',
                nodeType: 'menu',
                showForm: false,
                form: {
                    enable: 1,
                    colorCode: ''
                },
                autoCreateOpen: true,
                ruleValidate: {
                    key: [
                        {required: true, message: '键不能为空', trigger: 'blur'}
                    ],
                    name: [
                        {required: true, message: '名称不能为空', trigger: 'blur'}
                    ]
                }
            }
        },
        created() {
            this.loadData();
        },
        computed: {},
        methods: {
            loadData() {
                let that = this;
                this.showForm = false;
                this.selNode = null;
                PB.ajax(this.apis.getTreeForAdmin(), function (d) {
                    that.dbData = d.data;
                    that.updateTree(that);

                });
            },
            fmtTreeTitle(data) {
                let title = data.key + ' ' + data.name;
                if (!data.enable) {
                    title += '<span style="color: red">(禁用)</span>';
                }
                if (data.icon) {
                    title = '<i class="ivu-icon ivu-icon-' + data.icon + '"></i>' + title;
                }
                return title;
            },
            treeRender(h, {root, node, data}) {
                return h('span', {
                    'class': {
                        'ivu-tree-title': true,
                        'ivu-tree-title-selected': this.selNode && this.selNode.key === data.menuKey
                    },
                    on: {
                        click: () => {
                            this.onSelNode([data])
                        }
                    },
                    domProps: {
                        innerHTML: this.fmtTreeTitle(data)
                    },
                })
            },
            treePowerRender(h, {root, node, data}) {
                return h('span', {
                    'class': {
                        'ivu-tree-title': true,
                        'ivu-tree-title-selected': this.selNode && this.selNode.key === data.powerKey
                    },
                    on: {
                        click: () => {
                            this.onSelNode([data])
                        }
                    },
                    domProps: {
                        innerHTML: '<span style="color: red">' + data.key + ' ' + data.name + '</span>'
                    },
                })
            },
            updateTree(that) {
                let arr = [];
                arr = createData(that.dbData);
                that.treeData = arr;
                that.actionType = '';
                that.selNode = null;
                that.form = {};

                function createData(data) {
                    if (!data) {
                        return null;
                    }
                    let treeNodes = [];
                    for (let info of data) {
                        let node = createTreeNode(info);
                        node.expand = true;
                        if (info.children) {
                            node.children = createModuleData(info.children);
                        }
                        treeNodes.push(node);
                    }

                    return treeNodes;

                    function createModuleData(p_moduleData) {
                        let arrModelData = [];
                        for (let info of p_moduleData) {
                            let node = createTreeNode(info);

                            let arrChildNodes = [];
                            if (info.power) {
                                node.expand = false; // 子模块暂时全部收起来
                                for (let p_info of info.power) {
                                    let p_node = createTreeNodePower(p_info);

                                    arrChildNodes.push(p_node);
                                }
                            }


                            if (info.children) {
                                node.expand = true; // 子模块暂时全部收起来
                                for (let c_info of info.children) {
                                    let c_node = createTreeNode(c_info);


                                    if (c_info.power) {
                                        let arrCPNodes = [];
                                        for (let cp_info of c_info.power) {
                                            let cp_node = createTreeNodePower(cp_info);

                                            arrCPNodes.push(cp_node);
                                        }
                                        c_node.children = arrCPNodes;
                                    }

                                    arrChildNodes.push(c_node);
                                }
                            }

                            node.children = arrChildNodes;

                            arrModelData.push(node);
                        }

                        return arrModelData;
                    }

                    function createTreeNode(info) {
                        let node = {};


                        node.id = info.id;
                        node.key = info.menuKey;
                        node.menuKey = info.menuKey;
//                        node.uri = info.uri;
                        node.parentKey = info.parentKey;
                        node.icon = info.icon;
                        node.name = info.name;
                        node.orderIndex = info.orderIndex;
                        node.enable = info.enable;
                        node.colorCode = info.colorCode;

                        return node;
                    }

                    function createTreeNodePower(info) {
                        let node = {};
                        node.render = that.treePowerRender;
                        node.key = info.powerKey;
                        node.powerKey = info.powerKey;
                        node.url = info.url;
                        node.name = info.name;
                        node.menuKey = info.menuKey;
                        node.id = info.id;

                        return node;
                    }
                }
            },
            changeIsUse(status) {
                this.form.enable = status ? 1 : 0;
            },
            onSelNode(nodes) {
                if (nodes && nodes.length > 0) {
                    let node = nodes[0];
                    this.selNode = node;
                    this.form = { // 为了避免树控件额外属性污染表单属性，需要逐个赋值一次
                        id: node.id,
                        name: node.name,
                        key: node.key,
                        parentKey: node.parentKey,
                        menuKey: node.menuKey,
                        powerKey: node.powerKey,
                        uri: node.uri,
                        url: node.url,
                        icon: node.icon,
                        orderIndex: node.orderIndex,
                        enable: node.enable,
                        colorCode: node.colorCode
                    };
                    if (this.selNode.powerKey) {
                        this.nodeType = 'power';
                    }
                    else {
                        this.nodeType = 'menu';
                    }

                    this.showForm = true;
                }
                else {
                    this.selNode = null;
                    this.showForm = false;
                }
            },
            addTopMenu() {
                this.initAddForm('1');
                this.nodeType = 'menu';
            },
            addChildMenu() {
                this.initAddForm('2');
                this.nodeType = 'menu';
            },
            addPower() {
                this.initAddForm('3');
                this.nodeType = 'power';
            },
            initAddForm(p_Type) {
                let flag = false;
                this.form = {
                    enable: 1,
                    autoCreateOpen: true
                }; // 清空表单数据
                switch (p_Type) {
                    case '1':
                        this.form.parentKey = '0';
                        flag = true;
                        break;
                    case '2':
                        if (!this.selNode) {
                            PB.alert('请先选中一个上级节点');
                            flag = false;
                            break;
                        }
                        this.form.parentKey = this.selNode.key;
                        flag = true;
                        break;
                    case '3':
                        if (this.nodeType != 'menu') { // 需要额外判断选中的是菜单，而不是权限节点
                            PB.alert('请先选中一个菜单节点');
                            flag = false;
                            break;
                        }
                        this.form.menuKey = this.selNode.key;
                        flag = true;
                        break;
                }
                if (flag) {
                    this.actionType = p_Type;
                    this.showForm = true;
                }
            },
            save() {
                this.$refs['myForm'].validate((valid) => {
                    if (valid) {

                        let flag = false;
                        switch (this.actionType) {
                            case '1':
                                flag = true;
                                break;
                            case '2':
                                if (!this.form.parentKey) {
                                    PB.alert('请输入上级节点键名');
                                    flag = false;
                                    break;
                                }

                                flag = true;
                                break;
                            case '3':
                                if (!this.selNode) {
                                    PB.alert('请先选中一个菜单节点');
                                    flag = false;
                                    break;
                                }
                                flag = true;
                                break;
                            default:
                                // 如果actionType是空，表示是修改
                                if (!this.selNode) {
                                    PB.alert('请先选中一个节点');
                                    flag = false;
                                    break;
                                }
                                flag = true;
                                break;
                        }
                        if (flag) {
                            let that = this;
                            if (this.nodeType == 'menu') {
                                PB.ajax(this.apis.save(this.form, this.autoCreateOpen ? 1 : 0), function (d) {
                                    that.loadData();
                                });
                            }
                            else {
                                PB.ajax(this.apis.saveMenuPower(this.form), function (d) {
                                    that.loadData();
                                });
                            }
                        }
                    }
                    else {
                        this.$Message.error('表单验证失败!');
                    }
                });
            },
            remove() {
                if (!this.selNode) {
                    PB.alert('请先选中一个节点');
                    return;
                }
                let that = this;
                PB.confirm('确定删除吗？', function () {

                    if (that.nodeType == 'menu') {
                        PB.ajax(that.apis.remove(that.form.id), function (d) {
                            that.loadData();
                        });
                    }
                    else {
                        PB.ajax(that.apis.removeMenuPower(that.form.id), function (d) {
                            that.loadData();
                        });
                    }
                });
            }

        }
    });
</script>
</body>


</html>
